<template>
  <el-select
    v-if="AuthModule.authrole === 'system_admin'"
    filterable
    remote
    clearable
    :loading="remoteLoading"
    :value="cloudTenantSearchId"
    :loading-text="$t('common.loading')"
    :placeholder="$t('common.tenantUserSelectPlaceholder')"
    @change="(value) => $emit('change', value)"
    :disabled="cloudTenantLoading"
    style="margin-right: 10px"
    :remote-method="getTenantOptions"
    @clear="
      () => {
        tenantList = [];
      }
    "
  >
    <template v-if="cloudTenantLoading" #prefix>
      <i class="el-input__icon el-icon-loading"></i>
    </template>
    <el-option
      v-for="tenant in tenantList"
      :key="tenant.id"
      :label="tenant.name"
      :value="tenant.id"
    >
    </el-option>
  </el-select>
</template>
<script lang="ts">
import Vue from 'vue'
import { AuthModule } from "../../../store/modules/auth";

export default Vue.extend({
  computed: {
    AuthModule: () => AuthModule,
  },
  props: ["cloudTenantSearchId"],
  model: {
    prop: 'cloudTenantSearchId',
    event: 'change'
  },
  data() {
    return {
      tenantList: [],
      remoteLoading: false,
      cloudTenantLoading: false,
    }
  },
  methods: {
    // 获取租户列表
    getTenantOptions(query: any){
      if (query !== '') {
        (this as any).loading = true;
        (this as any).remoteLoading = true;
        (this as any).$tunnyApi.apiGetTenantList({ search: query }).then((res: any) => {
          (this as any).loading = false;
          (this as any).remoteLoading = false;
          res = res.sort((a: any, b: any) => (a.name).localeCompare((b.name), 'zh-Hans-CN', { sensitivity: 'accent' }));
          (this as any).tenantList = res;
          (this as any).cloudTenantLoading = false;
        });
        } else {
          (this as any).tenantList = [];
        }
    }
  }
});
</script>

<style>
</style>